<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../bower_components/polymer/lib/mixins/gesture-event-listeners.html">
<link rel="import" href="shared-styles.html">

<dom-module id="main-element">
    <template>
        <style include="shared-styles"></style>
        <div class="container" >
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-6">
                        <h1>Polymer v2.0.0</h1>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="run" on-tap="run">Create 1,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="runlots" on-tap="runLots">Create 10,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary
                                btn-block" id="add" on-tap="add">Append 1,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary
                                btn-block" id="update" on-tap="update">Update every 10th row</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary
                                btn-block" id="clear" on-tap="clear">Clear</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary
                                btn-block" id="swaprows" on-tap="swapRows">Swap Rows</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-hover table-striped test-data">
                <tbody>
                    <template is="dom-repeat" items="[[data]]">
                        <tr class$="[[rowClass(item.id, selected)]]">
                            <td class="col-md-1">[[item.id]]</td>
                            <td class="col-md-4">
                                <a on-tap="select">[[item.label]]</a>
                            </td>
                            <td class="col-md-1"><a on-tap="del"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                            <td class="col-md-6"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
            <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
        </div>
    </template>
    <script>

    class MainElement extends Polymer.GestureEventListeners(Polymer.Element) {
        static get is() { return 'main-element' }
        static get properties() {
            return {
                data: {
                    type: Array,
                    value: function() { return []; },
                },
                did: {
                    type: Number,
                    value: 1,
                },
                selected: Number
            }
        }
        add() {
            this.data = this.data.concat(this.buildData(1000));
        }
        run() {
            this.data = this.buildData(1000);
        }
        runLots() {
            this.data = this.buildData(10000);
        }
        clear() {
            this.data = [];
        }
        del(e) {
            this.splice("data", e.model.index, 1);
        }
        select(e) {
            this.selected = e.model.item.id;
        }
        swapRows() {
            if(this.data.length > 998) {
                var tmp = this.data[1];
                this.set(["data", 1], this.data[998]);
                this.set(["data", 998], tmp);
            }
        }
        update() {
            for (let i=0;i<this.data.length;i+=10) {
                this.set(["data", i, "label"], this.data[i].label + ' !!!');
            }
        }
        rowClass(id, selected) {
            return id === selected ? "danger" : '';
        }
        buildData(count) {
            var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
            var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
            var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
            var data = [];
            for (var i = 0; i < count; i++) {
                data.push({ id: this.did++, label: adjectives[this._random(adjectives.length)] + " " + colours[this._random(colours.length)] + " " + nouns[this._random(nouns.length)] });
            }
            return data;
        }
        _random(max) {
            return Math.round(Math.random() * 1000) % max;
        }
    }
    window.customElements.define(MainElement.is, MainElement);
    </script>
</dom-module>
